<link rel="stylesheet" href="../css/frame1.css?v=1.0.1">
<style>
    .pb {
        padding-bottom: 60px;
    }
</style>
<div id="view" v-cloak>
    <!-- 个人广播 -->
    <ul class="wrap" :class="{'pb': ffInfo.userid != myuserid}">
        <!-- 约会详情 -->
        <li class="list">
            <div class="flex-bt" style="align-items:flex-start;">
                <div class="left flex">
                    <div class="tx flex-c img-h" @click="go_userInfo(ffInfo.userid, ffInfo.name, ffInfo.sex)">
                        <img :src="imgurl+ffInfo.head_100" @load="imgCss(imgurl+ffInfo.head_100, $event)" onerror="this.onerror=null;this.src='../image/touxiang.png'" alt="">
                        <i class="base-icon dy-male-icon" v-if="ffInfo.sex == '男'"></i>
                        <i class="base-icon dy-female-icon" v-if="ffInfo.sex == '女'"></i>
                    </div>
                    <div>
                        <div class="name-wrap flex">
                            <span class="name">{{ffInfo.name}}</span>
                            <span v-if="ffInfo.nvshen == 1" class="girl-tag tag"></span>
                            <span v-if="ffInfo.is_identity_authentication == 2" class="real-tag tag"></span>
                            <span v-if="ffInfo.is_vip >0" class="vip-tag tag"></span>
                        </div>
                        <span class="time">{{ffInfo.addtime}}</span>
                    </div>
                </div>
            </div>
            <div class="dy-content-wrap new-padding-10">
                <div class="tri"></div>
                <ul class="ul">
                    <li class="li" v-if="ffInfo.category_id && ffInfo.category_id!=null">
                        <i class="base-icon dy-theme-icon"></i>
                        <div class="dy-content">{{themeObj[ffInfo.category_id]}}</div>
                    </li>
                    <li class="li" v-if="ffInfo.datetime && ffInfo.datetime!=null">
                        <i class="base-icon dy-time-icon"></i>
                        <div class="dy-content">{{ffInfo.datetime}}</div>
                    </li>
                    <li class="li" v-if="ffInfo.call">
                        <i class="base-icon dy-person-icon"></i>
                        <div class="dy-content">{{ffInfo.call}}</div>
                    </li>
                    <li class="li" v-if="ffInfo.filter">
                        <i class="base-icon dy-money-icon"></i>
                        <div class="dy-content" v-if="ffInfo.filter != '不限'">￥{{ffInfo.filter}}</div>
                        <div class="dy-content" v-else>{{ffInfo.filter}}</div>
                    </li>
                    <li class="li" v-if="ffInfo.citys && ffInfo.citys != null">
                        <i class="base-icon dy-area-icon"></i>
                        <div class="dy-content">{{ffInfo.citys}}</div>
                    </li>
                    <li class="li" v-if="ffInfo.content && ffInfo.content!=null">
                        <i class="base-icon dy-content-icon"></i>
                        <div class="dy-content">{{ffInfo.content}}</div>
                    </li>
                    <!-- <li class="li" v-if="ffInfo.desire_object && ffInfo.desire_object!=null">
                        <i class="base-icon dy-person-icon"></i>
                        <div class="dy-content">{{ffInfo.desire_object}}</div>
                    </li> -->
                </ul>
                <div class="img-wrap flex-w" v-if="ffInfo.sumbImage && ffInfo.sumbImage.length > 0 && ffInfo.sumbImage[0]">
                    <div class="img img-h " v-for="(s, sindex) in ffInfo.sumbImage"
                        @click="_url({imgArr:ffInfo.masterimg, iIndex:sindex, url: 'frame1/dy_img', title: '查看图片'})">
                        <img :src="imgurl+s" @load="imgCss(imgurl+s, $event)"
                            onerror="this.onerror=null;this.src='../image/error-img.png'" alt="">
                    </div>
                </div>
            </div>
            <div class="over" v-if="ffInfo.overdue == 1"></div>
        </li>
        <!-- 点赞列表 -->
        <div class="zan-wrap w-bg flex-bt new-margin-tb-10 new-padding-10" v-if="ffInfo.zan && ffInfo.zan.length > 0">
            <div class="flex">
                <i class="base-icon dy-zan-icon"></i>
                <ul class="tx-ul flex">
                    <li class="li" v-for="(m, index) in ffInfo.zan" v-if="index<3">
                        <div class="img img-h">
                            <img :src="imgurl+m.head_100" @load="imgCss(imgurl+m.head_100, $event)"
                                onerror="this.onerror=null;this.src='../image/touxiang.png'" alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="theme-font">共{{ffInfo.zan.length}}人点赞</div>
        </div>
        <!-- 报名列表 -->
        <div class="enroll-wrap  w-bg new-margin-tb-10 new-padding-10"
            v-if="ffList.length > 0 && myuserid == ffInfo.userid">
            <h3 class="new-margin-b-10">{{ffList.length}}人已报名</h3>
            <ul class="e-wrap">
                <li class="li flex-bt" v-for="(m, index) in ffList">
                    <div class="flex">
                        <div class="img img-h" @click="go_userInfo(m.user_id, m.user_name, m.user_sex)">
                            <img :src="imgurl+m.user_head" @load="imgCss(imgurl+m.user_head, $event)"
                                onerror="this.onerror=null;this.src='../image/touxiang.png'" alt="">
                        </div>
                        <span class="name">{{m.user_name}}</span>
                    </div>
                    <span class="theme-font" @click="getContact(m.user_id)">联系TA</span>
                </li>
            </ul>
        </div>

        <!-- 评论列表 -->
        <div class="comment-wrap w-bg new-margin-tb-10 new-padding-10" v-if="ffInfo.text && ffInfo.text.length > 0">
            <ul class="c-ul">
                <li class="li" v-for="(m, index) in ffInfo.text">
                    <div class="flex-bt" style="align-items:flex-start;">
                        <div class="left flex">
                            <div class="tx img-h">
                                <img :src="imgurl+m.head_100" @load="imgCss(imgurl+m.head_100, $event)"
                                    onerror="this.onerror=null;this.src='../image/touxiang.png'" alt="">
                            </div>
                            <div>
                                <div class="name-wrap flex-c">
                                    <span class="name">{{ m.name }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dy-content-wrap new-padding-10">
                        <div class="tri"></div>
                        <div class="c-content theme-font">
                            {{m.content}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </ul>
    <div class="input-bg" v-if="ffInfo.userid != myuserid">
        <div class="input-wrap">
            <input type="text" placeholder="说点什么">
            <button class="send-btn" @click.stop @click="send()">发送</button>
        </div>
    </div>
</div>
<script>
    var dy_id;
    var view = new Vue({
        el: '#view',
        data: {
            myuserid: myuserid,
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            themeObj: {}, // 主题对象
            inputObj: {
                id: 0,
                uid: 0
            }, // 评论 广播id
        },
        methods: {
            // 发布评论
            send: function () {
                var _this = this;
                if (_this.ffInfo.userid == myuserid) {
                    _msg('不能给自己的广播评论');
                    return;
                }
                var val = $.trim($('.input-wrap input').val());
                if (!val) {
                    _msg('评论不能为空');
                    return;
                }
                _ajax('home/Dymanic/comment', function (ret, err) {
                    _log(JSON.stringify(ret))
                    _log(JSON.stringify(err))
                    if (ret) {
                        _msg(ret.msg);
                        if (ret.code == 200) {
                            $('.input-wrap input').val('');
                            getDynamic();
                            pushMsg(_this.ffInfo.userid);
                        }
                    }
                }, {
                    dy_id: _this.ffInfo.dy_id,
                    userid: myuserid,
                    touserid: _this.ffInfo.userid,
                    type: 0, //0为评论，1为回复
                    content: val,
                })
            },
            // 联系对方
            getContact: function (id) {
                _ajax('home/user/vipsee', function (ret, err) {
                    _log(JSON.stringify(ret));
                    _log(JSON.stringify(err));
                    if (ret) {
                        if (ret.code == 200 && ret.num > 0) {
                            var msg = '你剩余' + ret.num + '次会员特权，是否使用1次特权查看她的联系方式';
                            var btn = ['选择TA', '取消'];
                            _confirm({
                                msg: msg,
                                btn: btn
                            }, function (bIndex) {
                                if (bIndex == 1) {
                                    showDetail('frame1/link_modal', {
                                        uid: id
                                    })
                                }
                            })
                        } else if (ret.code == 205) {
                            showDetail('frame1/link_modal', {
                                uid: id
                            })
                        } else {
                            _msg(ret.msg);
                        }
                    }
                }, {
                    user_id: myuserid,
                    to_user: id,
                })
            },
            _url: function (param, url) {
                _url(param, url);
            },
            // 图片自适应
            imgCss: function (url, event) {
                _log(url)
                var e = event.currentTarget;
                imgCss(url, function (w, h) {
                    if (w < h) {
                        $(e).parent().addClass('img-w').removeClass('img-h');
                    }
                })
            },
            // 查看用户资料
            go_userInfo: function (id, name, sex) {
                go_userInfo(id, name, sex);
            },
            // 清除html
            clearHtml: function (s) {
                return clearHtml(s);
            }

        }
    })
    dy_id = pageParam['id'];
    judgeLogin()
    getDynamic();
    getEnroll();
    getTheme()
    // 监听回车
    window.onkeydown = function (e) {
        if (e.keyCode == 13) {
            view.send();
        }
    }
    // 获取约会详情
    function getDynamic() {
        _ajax('Home/Dymanic/dycommentlsts', function (ret) {
            _log(JSON.stringify(ret));
            if (ret && ret.code == 200) {
                view.ffInfo = ret.result;
            }
        }, {
            dy_id: dy_id
        })
    }

    // 获取报名列表
    function getEnroll() {
        _ajax('Home/Dymanic/enrolllist', function (ret, err) {
            _log(JSON.stringify(ret));
            _log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                view.ffList = ret.data;
            }
        }, {
            dy_id: dy_id
        })
    }

    // 获取主题列表
    function getTheme() {
        _ajax('home/dymanic/category', function (ret, err) {
            if (ret && ret.code == 200 && ret.result && ret.result.length > 0) {
                for (var i = 0, len = ret.result.length; i < len; i++) {
                    view.themeObj[ret.result[i].id] = ret.result[i].name;
                }
            }
        })
    }
</script>